<!-- 这个文件应该没用，别删也别改 -->
<template>
  <div>
    <button @click="showBottom = true">Login</button>

    <!-- 弹出层 -->
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '35%' }">
      <div class="toLoginView">
        <div class="que">
          {{ $t(loginView.yn) }}
        </div>
        <div class="btn">
          <div class="n" @click="showBottom = false"> {{ $t(loginView.n) }}</div>
          <div class="y" @click="loginFun"> {{ $t(loginView.y) }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Login } from "@/server/api/LoginApi.js";
import { userStore } from "@/stores/userStore.js";
import { incomplete } from "@/server/api/rechargeOrder";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let showBottom = ref(false);

let router = useRouter();
let LoginStatus = ref(0)


const loginFun = () => {
  Pi.init({ version: "2.0", sandbox: true });

  const scopes = ["payments", "username", "wallet_address"];

  const onIncompletePaymentFound = (payment) => {
    return incomplete({
      identifier: payment.identifier,
      transaction: {
        _link: payment.transaction._link,
        txid: payment.transaction.txid,
      },
    }).then((data) => {
      console.log(data);
    });
  };

  Pi.authenticate(scopes, onIncompletePaymentFound)
    .then(function (auth) {
      console.log("auth", auth);
      let userInfo = {
        accessToken: auth.accessToken,
        userId: auth.user.uid,
        userName: auth.user.username,
      };

      Login(userInfo).then((data) => {
        console.log(data);
        LoginStatus = data.status
        if (data.status === 200) {
          // 将用户信息存入pinia
          userStore().userInfoChange(data.data);

          // 发布消息到socket Login() 存入userId
          // this.$socket.emit("login", data.data.userInfo.userId);
        }
      });
    })
    .catch(function (error) {
      console.log(error);
    });
};
</script>

<style lang="scss" scoped>
button {
  font-weight: bold;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 150rem;
  height: 40rem;

  font-size: 16rem;

  border: 0;
  border-radius: 10rem;

  background: #f4f4f4;

  box-shadow: 3rem 2rem 5rem 0 rgba(0, 0, 0, 0.2);

  &:active {
    transform: translateY(-1rem);
    background: #efefef;
    box-shadow: inset 3rem 2rem 5rem 0 rgba(0, 0, 0, 0.2);
  }
}

.toLoginView {
  height: 100%;
  display: flex;
  flex-direction: column;

  .que,
  .btn {
    display: flex;
  }

  .que {
    height: 80%;
    font-size: 36rem;

    justify-content: center;
    align-items: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      height: 1rem;
      width: 100%;

      background: #444;
      transform: scaleY(0.5);
    }
  }

  .btn {
    flex: 1;

    >div {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20rem;

      background: #f9f9f9;

      &:active {
        background: #f0f0f0;
      }

      &:nth-of-type(1) {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          right: 0;
          height: 100%;
          width: 1rem;

          background: #444;
          transform: scale(0.5);
        }
      }
    }
  }
}
</style>
